<template>
    <view class="container" :style="themeColor">
        <view class="result-status">
            <image src="/static/icon/success.png" class="success-icon" mode="widthFix"></image>
            <view class="tip">订单提交成功，请及时支付</view>
        </view>
        <view class="ought-price">
            <view><text>￥</text>{{ parseFloat(this.payMoney).toFixed(2) }}</view>
            <text>应付金额</text>
        </view>

        <view class="playlist">
            <view class="playtype" v-for="(item, index) in payList" :key="index" @click="paychange(item)">
                <image class="pay-type-icon" :src="getPayTypeIcon(item)"></image>
                <view class="pay-type-name">{{ item.PayName }}
                    <text v-if="item.PaymentPayWay == 10">（信用额度：￥{{ item.Balance }}）</text>
                    <text v-if="item.PaymentPayWay == 1">（余额：￥{{ item.Balance }}）</text>
                </view>
                <view class="radio" :class="payactive == item.PaymentPayWay ? 'active_radio' : ''"><text></text> </view>
            </view>
        </view>

        <view class="footer">
            <button class="btn" @click="clickFn">确认支付</button>
        </view>
        <uni-popup ref="authorizationTip" type="center" :animation="false">
            <view class="pop-return-box">
                <authorization-box @tipclose="tipclose"></authorization-box>
            </view>
        </uni-popup>
        <uni-popup ref="passwordBox" type="center">
            <password-box ref="password" :setPwd="setPwd" @check="CheckPayPassword" @close="closePassbox">
            </password-box>
        </uni-popup>
    </view>
</template>

<script>
import { GetPayOrderId, XianPayMerge, XianPayNew } from "@/service/api/order.js"
import { MiniProgramPay } from "@/service/api/open.js"
import { getList } from "@/service/api/businessPay.js"
import { GetMiniAppPayData } from "@/service/api/weChat.js"
import { helPayFn } from "@/utils/orderUtil.js"
import authorizationBox from "@/components/order/authorization-box.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import configs from "@/config/config.js"
import passwordBox from "@/pages_supplier/components/order/password-box.vue"
import { IsSetPayPassword, CheckPayPassword, GetCreditLimit } from "@/service/api/member.js"
export default {
    components: {
        authorizationBox,
        passwordBox
    },
    data() {
        return {
            payList: [],
            outTradeNo: "",
            orderId: 0,
            payMoney: 0,
            payactive: -1,
            balance: 0,
            sn: "",
            isMerge: false,
            isPayPwd: false, //是否设置了支付密码
            isPayPwdRight: false,
            needBalancePayPassword: true, //余额支付是否需要密码
            setPwd: true,
            isTempCar: false,
        }
    },
    computed: {},
    onLoad(e) {
        console.log("e", e)
        this.orderId = e.orderId
        this.outTradeNo = e.outTradeNo
        this.isMerge = e.isMerge == "true"
        this.sn = e.sn
        this.payMoney = e.payMoney
        if (!this.isMerge) {
            this.getOrderDetail()
        }
        if (e.isTempCar == "true") {
            this.isTempCar = true
        }
        this.needBalancePayPassword = storage.getCache("webInfo").NeedBalancePayPassword
    },
    onShow() {
        this.IsSetPayPassword()
        this.$forceUpdate()
    },
    mounted() {
        this.getList()
    },
    methods: {
        CheckPayPassword(pwd) {
            //验证支付密码
            let password = {
                password: pwd,
            }
            this.payPassWord = pwd
            CheckPayPassword(password).then((res) => {
                if (res.Data) {
                    this.isPayPwdRight = true
                    this.clickFn()
                } else {
                    this.$refs.password.delete()
                    this.isPayPwdRight = false
                    this.easyToast(res.Msg)
                }
            })
        },
        IsSetPayPassword() {
            //获取是否设置支付密码
            IsSetPayPassword().then((res) => {
                if (res.State == 1 && res.Data) {
                    if (res.Data == true) {
                        this.isPayPwd = true
                        this.setPwd = false
                    } else {
                        this.isPayPwd = false
                        this.setPwd = true
                    }
                }
            })
        },
        closePassbox() {
            //关闭支付密码框
            this.$refs.password.setFocus(1)
            wx.hideKeyboard()
            this.$refs.passwordBox.close()
            this.$forceUpdate()
        },
        //获取支付方式
        getList() {
            let param = {}
            getList(param).then((res) => {
                this.payList = []
                // 专款
                if (this.isTempCar) {
                    this.payList = res.Data.filter((e) => {
                        return e.PayType == 21
                    })
                    this.payactive = 21
                } else {
                    this.payList = res.Data.filter((e) => {
                        return e.PayType != 21
                    })
                }
                if (this.payList.length > 0) {
                    this.payList.forEach((e) => {
                        if (e.PaymentPayWay == this.payactive) {
                            this.balance = e.Balance
                        }
                    })
                }
                this.$forceUpdate()
            })
        },
        //获取订单详情
        getOrderDetail() {
            let path = "?id=" + this.orderId
            GetPayOrderId(path).then((res) => {
                if (res.State) {
                    this.outTradeNo = res.Data.Order.OutTradeNo
                    this.sn = res.Data.Order.Sn
                    this.payMoney = res.Data.Order.PayMoney
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },

        paychange(item) {
            this.payactive = item.PaymentPayWay
            this.balance = item.Balance
        },
        tipclose() {
            this.$refs.authorizationTip.close()
        },
        clickFn() {
            // todo
            const that = this
            let paths = "?id=" + this.orderId
            GetPayOrderId(paths).then((ress) => {
                if (ress.State) {
                    if (ress.Data.Order.State == 11) {
                        this.easyToast("订单已取消，无法支付")
                        return
                    } else {
                        if (that.payactive == -1) {
                            this.easyToast("请选择支付方式")
                            return
                        }
                        // if (that.payactive == 10) { //信用额度支付
                        // 	if (that.data.CreditLimit > 0) {
                        // 		let parms = {
                        // 			payMn: that.sn,
                        // 			payWay: 10,
                        // 			price: that.payMoney
                        // 		}
                        // 		that.synthesizepay(parms)
                        // 	} else {
                        // 		that.easyToast('信用额度余额不足')
                        // 	}
                        // }
                        if (that.payactive == 1) {
                            //余额支付
                            if (that.balance >= that.payMoney) {
                                let parms = {
                                    payMn: that.sn,
                                    payWay: 1,
                                    price: that.payMoney,
                                }
                                if (this.needBalancePayPassword) {
                                    //是否需要密码
                                    if (this.isPayPwd) {
                                        //是否设置了密码
                                        if (this.isPayPwdRight) {
                                            //是否密码正确
                                            parms.payPassWord = this.payPassWord
                                            this.synthesizepay(parms, 1)
                                        } else {
                                            this.$refs.passwordBox.open()
                                            this.$nextTick(() => {
                                                this.$refs.password.setFocus()
                                            })
                                        }
                                    } else {
                                        this.$refs.passwordBox.open()
                                        this.$nextTick(() => {
                                            this.$refs.password.setFocus()
                                        })
                                    }
                                } else {
                                    this.synthesizepay(parms)
                                }
                            } else {
                                that.easyToast("账户余额不足")
                            }
                        }
                        if (that.payactive == 0) {
                            //线下支付
                            that.easyGoTo(
                                "/pages_supplier/packet/order/waitPay?paynumber=" +
                                that.payMoney +
                                "&orderId=" +
                                that.orderId +
                                "&from=0",
                            )
                        }
                        if (that.payactive == 4 || this.payactive == 7 || this.payactive == 14 || this.payactive == 8) {
                            //微信支付
                            let openId = storage.getCache("openId")
                            let webInfo = storage.getCache("webInfo")
                            if (openId) {
                                let notify_url = configs.baseUrl + "Notify/OrderPay/" + webInfo.BusinessId
                                let tip = "订单支付"
                                let payParam = {
                                    tip: tip,
                                    orderSn: that.sn,
                                    paySn: that.outTradeNo,
                                    money: that.payMoney,
                                    notifyUrl: notify_url,
                                    payWay: this.payactive,
                                    businessId: webInfo.BusinessId,
                                    openId: openId,
                                }
                                uni.showLoading({
                                    title: "付款中..",
                                    mask: true,
                                })
                                that.fuiouPay(payParam)
                            } else {
                                that.$refs.authorizationTip.open()
                            }
                        }
                        if (that.payactive == 12) {
                            //云支付
                            that.helPayOrder(that.orderId)
                        }
                        if (that.payactive == 21) {
                            // 专款专用支付
                            let parms = {
                                // payMn: that.sn,
                                orderId: that.orderId,
                                payWay: 21,
                                price: that.payMoney,
                            }
                            XianPayNew(parms).then(res => {
                                if (res.State) {
                                    this.easyReLaunch("/pages_supplier/packet/order/payResult")
                                } else {
                                    this.easyToast(res.Msg)
                                }
                            })
                        }
                    }
                }
            })
        },
        fuiouPay(payParam) {
            var that = this
            GetMiniAppPayData(payParam).then((payRes) => {
                if (payRes.State) {
                    this.wxpay(payRes)
                } else {
                    this.easyToast(payRes.Msg)
                    setTimeout(() => {
                        uni.hideLoading()
                    }, 2000)
                }
            })
        },
        synthesizepay(parms) {
            XianPayMerge(parms).then((res) => {
                if (res.State) {
                    this.easyReLaunch("/pages_supplier/packet/order/payResult")
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        wxpay(payRes) {
            var that = this
            //微信支付api
            uni.requestPayment({
                provider: "wxpay",
                timeStamp: String(payRes.Data.timeStamp),
                nonceStr: payRes.Data.nonceStr,
                package: payRes.Data.package,
                signType: payRes.Data.signType,
                paySign: payRes.Data.paySign,
                success: function (res) {
                    uni.hideLoading()
                    that.easyReLaunch("/pages_supplier/packet/order/payResult")
                },
                fail: function (err) {
                    uni.hideLoading()
                },
            })
        },
        helPayOrder(orderId) {
            const type = this.isMerge ? 2 : 0
            helPayFn(this, orderId, type).then((res) => {
                setTimeout(() => {
                    this.easyGoTo("/pages/supplier/order/index")
                    storage.setCache("miniProgram", true)
                }, 1000)
            })
        },
        getPayTypeIcon(item) {
            // wxPay:0, //微信支付
            // offLine:1, //线下支付
            // balance:2, //余额支付
            // polymerize:3, //聚合支付
            // reportCoin:4, //报单币
            // aliPay:5, //支付宝支付
            // fuyouPay:6, //富友支付
            // unionPay:7, //银联支付
            // credit:10, //信用额度
            let type = item.PaymentPayWay
            let icon = ""
            switch (type) {
                case 0:
                    icon = "/static/img/bank/icon_pay_type_xx.png"
                    break
                case 4:
                    icon = "/static/img/bank/icon_pay_type_wx.png"
                    break
                case 5:
                    icon = "/static/img/bank/icon_pay_type_zfb.png"
                    break
                case 8:
                    icon = "/static/img/bank/icon_pay_type_yhk.png"
                    break
                case 10:
                    icon = "/static/img/bank/icon_pay_type_xy.png"
                    break
                case 10:
                    icon = "/static/img/bank/icon_pay_type_xy.png"
                    break
                default:
                    icon = "/static/img/bank/icon_pay_type_xx.png"
                    break
            }
            return icon
        },
        getOfflinePayTypeIcon(id) {
            switch (id) {
                case 0:
                    return "/static/img/bank/ylpay.png"
                    break
                case 1:
                    return "/static/img/bank/wxpay.png"
                    break
                case 2:
                    return "/static/img/bank/zfbpay.png"
                    break
                case 10:
                    return "/static/img/bank/bank.png"
                    break
            }
        },
    },
}
</script>

<style lang="scss">
page {
    background: #f7f7f7;
}

.container {
    background: #f7f7f7;
    padding: $app-page-padding $app-page-padding 120rpx $app-page-padding;
}

.result-status {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 32rpx;
}

.success-icon {
    width: 108rpx;
    height: 108rpx;
    display: block;
    margin-right: 16rpx;
}

.tip {
    font-size: 28rpx;
    color: $color-gray-2;
    text-align: center;
}

.ought-price {
    background: #ffffff;
    border-radius: 24rpx;
    height: 224rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 24rpx;

    view {
        font-size: 80rpx;
        font-weight: bold;
        color: #000000;

        text {
            font-size: 48rpx;
        }
    }

    text {
        font-size: 28rpx;
        color: $color-gray-2;
    }
}

.balance {
    background: $color-white;
    margin-bottom: 34rpx;
    border-radius: 24rpx;
}

.balance-title {
    height: 98rpx;
    background: linear-gradient(270deg, #ffede9 0%, #fffbf9 100%);
    border-radius: 24rpx 24rpx 0px 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #000000;
    font-size: 32rpx;
    font-weight: bold;

    image {
        width: 40rpx;
        height: 40rpx;
        margin: 0 22rpx 0 30rpx;
    }
}

.balance-body {
    background: #ffffff;
    height: 180rpx;
    display: flex;
    padding: 10rpx 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 0px 0px 24rpx 24rpx;
}

.balance-body-check {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.balance-input {
    view {
        font-size: 24rpx;
        color: $color-gray-2;
    }

    input {
        width: 230rpx;
        height: 60rpx;
        background: #f8f8f8;
        border-radius: 4rpx;
        border: 1rpx solid #000000;
        text-align: center;
        font-weight: bold;
        font-size: 36rpx;
    }
}

.checkmain {
    width: 32rpx;
    height: 32rpx;
    border: 1rpx solid rgba(0, 0, 0, 0.3);

    image {
        width: 32rpx;
        height: 32rpx;
        display: block;
    }
}

.checkbox-active {
    border-color: $app-color-main;
    background: $app-color-main;
}

.balance-title-Still {
    display: flex;
    flex-direction: column;
    height: 180rpx;
    padding-right: 24rpx;
    padding-top: 26rpx;
    padding-left: 30rpx;
    background: linear-gradient(270deg, #fff8ee 0%, #fffefc 100%);

    .balance-input {
        width: 100%;
    }
}

.still {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 36rpx;
}

.still-title {
    display: flex;

    image {
        margin-left: 0;
    }
}

.playlist {
    border-radius: 24rpx;
    overflow: hidden;

    &>view {
        height: 112rpx;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        background: #ffffff;
        // border-bottom: 1rpx solid #EBEBEB;
    }

    &>view:last-child {
        border-bottom: none;
    }

    .playtype {
        padding-right: 40rpx;
        padding-left: 24rpx;

        .pay-type-icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 12rpx;
        }

        .pay-type-name {
            flex: 1;
        }

        .radio {
            width: 38rpx;
            height: 38rpx;
            border: 2rpx solid rgba(0, 0, 0, 0.3);
            border-radius: 50%;
        }

        .active_radio {
            border-color: $app-color-main;
            display: flex;
            justify-content: center;
            align-items: center;

            text {
                width: 20rpx;
                height: 20rpx;
                border-radius: 50%;
                background: $app-color-main;
            }
        }
    }
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120rpx;
    display: flex;
    background: #ffffff;
    justify-content: center;
    align-items: center;
    padding-bottom: constant(safe-area-inset-bottom);
    /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom);

    /*兼容 IOS>11.2*/
    .btn {
        color: $color-white;
        background: $app-color-main;
        width: 690rpx;
        height: 90rpx;
        background: $app-color-main;
        border-radius: 45rpx;
        font-size: 32rpx;
    }

    .btn[disabled] {
        background: rgba(0, 169, 92, 0.6);
        color: #ffffff;
    }
}

.playlist-offline {
    &>view {
        border-bottom: none;
    }

    .offline-pay {
        border-radius: 4rpx;
        background: #fbfbfb;
        height: auto;
        display: flex;
        flex-direction: column;

        .offline-pay-item {
            width: calc(100% - 68rpx);
            display: flex;
            flex-direction: row;
            height: 112rpx;
            align-items: center;
            padding: 0 16rpx 0 52rpx;

            .pay-type-icon {
                width: 48rpx;
                height: 48rpx;
                margin-right: 12rpx;
            }

            .pay-type-name {
                flex: 1;
            }

            .radio {
                width: 38rpx;
                height: 38rpx;
                border: 2rpx solid rgba(0, 0, 0, 0.3);
                border-radius: 50%;
            }

            .active_radio {
                border-color: $app-color-main;
                display: flex;
                justify-content: center;
                align-items: center;

                text {
                    width: 20rpx;
                    height: 20rpx;
                    border-radius: 50%;
                    background: $app-color-main;
                }
            }
        }
    }

    padding-bottom: 24rpx;
}
</style>
